<template>
    <header class="web-page-header">
        <div class="header-container">
            <a class='logo'>
                <img class="img-box" src="../assets/logo/logo.svg">
            </a>
            <el-dropdown class="login-btn logged">
                <span class="el-dropdown-link">
                    <img class="head-portrait" src="../assets/user.jpg"><i class="el-icon-arrow-down el-icon--right arrow-down-style"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><i class="login-list-icon icon-id-card"></i>Profile</el-dropdown-item>
                    <el-dropdown-item><i class="login-list-icon icon-sign-in"></i>Sign Out</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </header>
</template>
<script>
    export default{
        data(){
            return{
            }
        }
    }
</script>
<style scoped>
/* 布局样式 */
.web-page-header {
    position: fixed;
    top: 0;
    z-index: 100;
    height: 70px;
    width: 100%;
    background:#fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
    text-align: center;
}

.web-page-header .logo{
    display: inline-block;
}

.web-page-header .logo .img-box{
    height: 30px;
    margin-top: 20px;
}

.web-page-header .header-container{
    margin: auto;
    width: 1200px;
    position: relative;
    height: 100%;
}

/* topbar */
.login-btn {
    position: absolute;
    height: 70px;
    width: 140px;
    line-height: 70px;
    text-align: center;
    right: 0;
    bottom: 0;
}

.head-portrait{
    border-radius: 20px;
    height: 40px;
    width: 40px;
    background: #ccc;
    display: inline-block;
    vertical-align: middle;
}

.arrow-down-style{
    font-weight: bolder;
    color: #9B9b9b;
}

.login-list-icon{
    padding-right: 12px;
}

</style>
